<!DOCTYPE html>
<html>
<head>
    <title>Physics Graph</title>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="520"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Configuration ---
        const config = {
            origin: { x: 70, y: 430 },
            scale: 48, // pixels per unit to keep grid squares square
            xMax: 10,
            yMax: 8,
            font: '20px Arial',
            boldFont: 'bold 20px Arial',
            gridColor: '#a0a0a0',
            axisColor: 'black',
            lineColor: 'black',
            textColor: 'black',
            gridLineWidth: 1,
            axisLineWidth: 1.5,
            dataLineWidth: 2.5
        };

        const { origin, scale, xMax, yMax } = config;

        // --- Coordinate Transformation ---
        const toCX = (x) => origin.x + x * scale;
        const toCY = (y) => origin.y - y * scale;

        // --- Drawing Functions ---

        function drawGrid() {
            ctx.strokeStyle = config.gridColor;
            ctx.lineWidth = config.gridLineWidth;
            ctx.beginPath();

            // Vertical grid lines
            const xSteps = xMax / 0.2;
            for (let i = 1; i <= xSteps; i++) {
                const x = i * 0.2;
                ctx.moveTo(toCX(x), toCY(0));
                ctx.lineTo(toCX(x), toCY(yMax));
            }

            // Horizontal grid lines
            const ySteps = yMax / 0.2;
            for (let i = 1; i <= ySteps; i++) {
                const y = i * 0.2;
                ctx.moveTo(toCX(0), toCY(y));
                ctx.lineTo(toCX(xMax), toCY(y));
            }
            ctx.stroke();
        }

        function drawAxes() {
            ctx.strokeStyle = config.axisColor;
            ctx.lineWidth = config.axisLineWidth;
            ctx.beginPath();

            // Y-axis
            ctx.moveTo(toCX(0), toCY(0));
            ctx.lineTo(toCX(0), toCY(yMax + 0.4)); // Extend slightly

            // X-axis
            ctx.moveTo(toCX(0), toCY(0));
            ctx.lineTo(toCX(xMax + 0.4), toCY(0)); // Extend slightly

            ctx.stroke();
        }

        function drawLabels() {
            ctx.fillStyle = config.textColor;
            ctx.font = config.font;

            // Y-axis numbers
            ctx.textAlign = 'right';
            ctx.textBaseline = 'middle';
            for (let i = 2; i <= yMax; i += 2) {
                ctx.fillText(i, toCX(0) - 8, toCY(i));
            }

            // X-axis numbers
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            for (let i = 2; i <= xMax; i += 2) {
                ctx.fillText(i, toCX(i), toCY(0) + 8);
            }

            // Origin '0'
            ctx.textAlign = 'right';
            ctx.textBaseline = 'top';
            ctx.fillText('0', toCX(0) - 5, toCY(0) + 5);

            // Axis Titles
            ctx.font = config.boldFont;

            // Y-axis Title: ΔR / Ω
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText('\u0394R / \u03A9', toCX(-0.8), toCY(7));

            // X-axis Title: ΔL / 10⁻⁵ m
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            ctx.fillText('\u0394L / 10\u207B\u2075 m', toCX(xMax / 2), toCY(0) + 35);
        }

        function drawDataLine() {
            ctx.strokeStyle = config.lineColor;
            ctx.lineWidth = config.dataLineWidth;
            ctx.beginPath();
            // Data line from (0, 0) to (10, 7.5)
            ctx.moveTo(toCX(0), toCY(0));
            ctx.lineTo(toCX(10), toCY(7.5));
            ctx.stroke();
        }

        function drawCaption() {
            ctx.fillStyle = config.textColor;
            ctx.font = config.boldFont;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';
            ctx.fillText('Fig. 7.1', toCX(xMax / 2), canvas.height - 10);
        }

        // --- Main Drawing Execution ---
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawGrid();
        drawAxes();
        drawLabels();
        drawDataLine();
        drawCaption();
    </script>
</body>
</html>